<template>
    <xDataSpreadsheet class="p-report"
        :config="config"
        :customConfig="customConfig"
        :templateData="templateData"
        :bindData="bindData"
        @saveData="saveData"
    >
    </xDataSpreadsheet>
</template>

<script>
import xDataSpreadsheet from 'public/components/spreadSheet'
import * as defaultTemplateData from './templateData'

export default {
    components: { xDataSpreadsheet },
    data() {
        return {
            config: {},
            customConfig: {
                showUpload: true,
                showExport: true,
                showSave: true,
                showLoadData: true,
                isReport: false
            },
            templateData: [],
            bindData: {},
            id: 34,  // 先写固定值
        }
    },
    beforeMount() {
        const params = new URLSearchParams(window.location.search)
        this.id = params.get('id') || this.id;
    },
    mounted() {
        // 通过接口获取模板配置
        this.loadTemplate()

        // 通过接口获取绑定数据
        setTimeout(() => {
            // this.loadData()
        }, 3000);
    },
    methods: {
        saveData(tmpData) {
            this.$api.PageReport.update({
                id: this.id,
                value: tmpData
            }).then(res => {
                this.$Message.success('保存成功！')
            })
        },
        loadTemplate() {
            // this.templateData = defaultTemplateData.data
            // return
            this.$api.PageReport.query({
                id: this.id
            }).then(res => {
                if (res && res.length && res[0].value && res[0].value.length) {
                    this.templateData = res[0].value
                } else {
                    this.templateData = defaultTemplateData.data
                    // this.$api.PageReport.add({
                    //     type: 'report',
                    //     name: 'report'
                    // })
                }
            })
        },
        loadData() {
            this.bindData = defaultTemplateData.mockBindData()
        }
    }
}
</script>

<style lang="less">

</style>